import React, { memo, Suspense, useEffect, useState } from "react";
import { Layout } from "antd";
import HomeWrapper from "./style";
import IHeader from "@/components/home/header/header";
import IMain from "@/components/home/main/main";
import INavbar from "@/components/home/navbar/navbar";
const { Header, Footer, Sider, Content } = Layout;
export default memo(() => {
  const [collapsed, setCollapsed] = useState(false);
  return (
    <HomeWrapper>
      <Layout>
        <Sider
          className="sm:hidden lg:block"
          collapsible
          collapsed={collapsed}
          collapsedWidth={48}
          width={155}
          onCollapse={(value) => setCollapsed(value)}
        >
          <h1 className="title bg-white">
            LHJ - Admin Manager
          </h1>
          <INavbar theme={true} collapsed={collapsed}></INavbar>
        </Sider>
        <Layout>
          <Header>
            <IHeader></IHeader>
          </Header>
          <Content>
            <IMain></IMain>
          </Content>
        </Layout>
      </Layout>
    </HomeWrapper>
  );
});
